<template>
	<div>
		<div class="searchForm">
			<div>
				品牌名称
			</div>
			<div >
				<selectBrand ref="selectBrand" @getBrandName="getBrandName" />
			</div>
			<div>
			    系列名称：
			</div>
			<div>
				<selectSerial ref="selectSerial" 
				 @getClassName="getClassName" />
			</div>
			
		    <div>
		        <el-button type="primary" size="mini" @click="search">检索</el-button>
		        <el-button size="mini" @click="clearSearch">重置/检索</el-button>
				<el-button type="primary" size="mini" @click="addCate">新增系列</el-button>
		    </div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<el-table-column   align="center"    prop="class_name"    label="系列名称"></el-table-column>
			<el-table-column   align="center"    prop="brand_name"    label="品牌名称"></el-table-column>
			
			 <el-table-column   align="center"   label="状态">
			 	<template slot-scope="scope">
			 	   <div>
			 			<el-switch
			 			  @change="sortStatusList(scope.row)"	
			 			  v-model="scope.row.status"
			 			 :inactive-value="'0'"
			 			 :active-value="'1'"
			 			 >
			 			</el-switch>
			 	   </div>
			 	</template>
			 </el-table-column>
			  <el-table-column  label="排序(数字大的在前边)" width="200"  align="center">
			       <template slot-scope="scope">
			          <div>
						  <el-input @blur="sortStatusList(scope.row)" size="mini" v-model="scope.row.sort"
						  type="number" style="width: 80px;"></el-input>
			  		</div>
			       </template>
			   </el-table-column>
			   <el-table-column   align="center" width="400"   prop="class_remark"    label="系列说明"></el-table-column>
			<el-table-column   align="center"    prop="add_time"    label="添加时间"></el-table-column>
			<el-table-column   align="center"    prop="update_time"    label="修改时间"></el-table-column>
			
		   <el-table-column  label="操作"   align="center">
		        <template slot-scope="scope">
		            <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
					<el-button type="text" @click="delRow(scope.row.id)">删除</el-button>
				</template>
		    </el-table-column>
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		        :title="addTitle"
				:close-on-click-modal="false"
		        :visible.sync="formShow"
		        width="1000px"
		>
		  <div>
			  <el-form ref="form" label-width="80px">
				  <el-form-item label="品牌名称">
				  		<selectBrand ref="selectBrand1" 
							@getBrandName="getBrandName" />
						<!-- <el-input size="small"
							v-if="form.id"
							disabled
							v-model="form.brand_name"
						></el-input> -->
				  </el-form-item>
				  <el-form-item label="系列名称">
						 <el-input size="small" 
							v-model="form.class_name"
						 ></el-input>
				  </el-form-item>
				  <el-form-item label="系列说明">
						<el-input type="textarea" size="small" v-model="form.class_remark"
						></el-input>
				  </el-form-item>
				  <el-form-item label="系列排序">
				  		<el-input v-model="form.sort" type="number" 
				  			size="small"></el-input>
				  </el-form-item>
				  <el-form-item >
				      <el-button type="primary" @click="confirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
		
	</div>
</template>

<script>
	import selectSerial from '@/components/selectSerial.vue'
	import selectBrand from '@/components/selectBrand.vue'
	export default {
		data(){
			
			return {
				title:"",
				page:1,
				pageSize:10,
				search_form:{
					class_name:'',
					brand_name:""
				},
				form:{
					id:null,
					class_remark:'',
					class_name:'',
					brand_name:"",
					old_class_name:'',
					old_brand_name:'',
					sort:1
				},
				addTitle:'新增',
				isShow:false,
				table_name:'hs_class'
			}
		},
		components:{
			selectSerial,selectBrand
		},
		mounted() {
			this.lodeList()
		},
		methods:{
			addCate(){
				this.form = {
					id:null,
					class_remark:'',
					class_name:'',
					brand_name:"",
					old_class_name:'',
					old_brand_name:'',
					sort:1
				}
				this.addTitle = '新增'
				this.formShow = true
			},
			getClassName(val){
				this.search_form.class_name = val
				this.form.class_name = val
			},
			getBrandName(val){
				this.search_form.brand_name = val
				this.form.brand_name = val
				this.$refs.selectSerial.lodeClass(val)
			},
			delRow(id){
				this.$confirm('确定删除', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							let params = {
								table_name:this.table_name,
								ids:[id]
							}
				          this.$post('/prodectSys/delProdect',params,res=>{
							  this.lodeList()
						  })
				        })
			},
			sortStatusList(row){
				let params = {
					id:row.id,
					sort:row.sort,
					status:row.status,
					table_name:this.table_name
				}
				this.$post('/prodectSys/updateSortStatus',params,res=>{
					this.$message.success('操作成功')
					this.lodeList()
				})
			},
			editRow(row){
				this.addTitle = '编辑'
				for(let i in this.form){
					this.form[i] = row[i]
				}
				this.form.old_brand_name = row.brand_name
				this.form.old_class_name = row.class_name
				this.formShow = true
				setTimeout(()=>{
					this.$refs.selectBrand1.brand_name = row.brand_name
					this.$refs.selectSerial1.class_name = row.class_name
					this.$refs.selectSerial1.lodeClass(row.brand_name)
				},100)
				
			},
			clearSearch(){
				this.title = ''
				this.page = 1
				this.search_form={
					class_name:'',
					brand_name:""
				}
				
				this.$refs.selectBrand.brand_name = ''
				this.$refs.selectSerial.class_name = ''
				
				
				this.search()
			},
			confirm(){
				let url
				if(this.form.id){
					url = '/prodectSys/editClass'
				}else{
					url = '/prodectSys/addCate'
				}
				
				this.$post(url,this.form,res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.formShow = false
						this.search_form.brand_name = this.$refs.selectBrand.brand_name
						this.search_form.class_name = this.$refs.selectBrand.class_name
						this.lodeList()
					}
				})
			},
			lodeList(){
				let params = {
					page:this.page,
					pageSize:this.pageSize,
					table_name:this.table_name,
					...this.search_form
				}
				this.$post('/prodectSys/getBrandList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
		}
	}
</script>

<style>
</style>